import React from 'react';
import ReactDOM from 'react-dom/client';

// 导入具体的业务组件
import { Comments } from './Comments';

// 应用渲染的根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// class Hello extends React.Component {
//   render() {
//     console.log(this.props);
//     return (
//       <div>
//         <h1>下面是传入组件的数据：</h1>
//         <h3>我叫:{this.props.name}</h3>
//         <h3>我今年:{this.props.age}岁</h3>
//         <h3>我喜欢:{this.props.likes.join('=>')}</h3>
//         <h3>
//           我对象:{this.props.obj.name},{this.props.obj.age}
//         </h3>
//         <h3>执行个函数吧: {this.props.fn('xxx')}</h3>
//         <h3>传递个JSX吧: {this.props.jsx}</h3>
//       </div>
//     );
//   }
// }

const HelloFC = (props) => {
  const props2 = (props.obj.age = 28);
  // const props3 = (props.obj = {});

  return (
    <div>
      <h1>下面是传入组件的数据：</h1>
      <h3>我叫:{props.name}</h3>
      <h3>我今年:{props.age}岁</h3>
      <h3>我喜欢:{props.likes.join('=>')}</h3>
      <h3>
        我对象:{props.obj.name},{props.obj.age}
      </h3>
      <h3>执行个函数吧: {props.fn('xxx')}</h3>
      <h3>传递个JSX吧: {props.jsx}</h3>
    </div>
  );
};

root.render(
  <HelloFC
    name={'Jack'}
    age={18}
    likes={['吃饭', '睡觉', '做核酸']}
    obj={{ name: 'Rose', age: 18 }}
    fn={(x) => <div>x</div>}
    jsx={<div>yyy</div>}
  />
);
